<template>
    <view class="content">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
        <!-- <loading :loadingIsShow="loadingIsShow"></loading> -->
        <view class="main-container">
            <scroll-view :refresher-enabled="false" class="scroll-content" @scroll="scrollPage" scroll-y
                :lower-threshold="120" show-scrollbar="false" @scrolltolower="loadMore">
                <view class="scroll-box">
                    <view class="reviewWrapper">
                        <view class="replyTitle" style="padding: 0 48rpx;">评价详情</view>
                        <!-- 评论列表 -->
                        <view class="reviewList" style="padding: 0 48rpx;">
                            <view class="comment-item">
                                <view>
                                    <view class="user-info">
                                        <view class="user-info-left" style="display: flex; align-items: center;">
                                            <img :src="comments.wxUserInfo.avatarUrl? comments.wxUserInfo.avatarUrl : defaultAvatarUrl"
                                                alt="">
                                            <view class="user-name">{{ comments.wxUserInfo.nickName }}</view>
                                        </view>
                                        <template v-if="pageSymbol!=='myActCommentDetails'">
                                            <van-button size="mini" class="guanzhu" type="default">{{
                                                comments.currentUserFollow == true ? '已关注' : '关注'}}</van-button>
                                        </template>
                                    </view>
                                    <view class="comment-content">{{ comments.content }}</view>
                                </view>
                                <view class="image-container"
                                    v-if="comments.attachment && comments.judgeImages.length > 0">
                                    <view class="imgInfo" v-for="(i, j) in comments.judgeImages.slice(0, 4)" :key="j">
                                        <img :src="i" />
                                    </view>
                                </view>
                                <view class="comment-footer">
                                    <view class="time">{{ comments.formattedPublishTime }}</view>
                                    <view class="interaction" v-if="pageSymbol=='myActCommentDetails'">
                                        <van-icon name="chat-o" style="margin-right: 8rpx;" size="12" />
                                        <view class="currentNum" style="margin-right:40rpx;">{{ comments.commentCount }}
                                        </view>
                                        <view @click.stop="handlerLike(item)" style="padding-right: 8rpx;">
                                            <van-icon name="good-job-o" size="15" style="color:#888888 !important;"
                                                v-if="!comments.currentUserLike" />
                                            <van-icon name="good-job" size="15" style="color:#FF6203 !important;"
                                                v-if="comments.currentUserLike" />
                                        </view>
                                        <view class="currentNum">{{ comments.likeCount }}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="newReply" v-if="pageSymbol !=='myActCommentDetails'">
                            <view class="replyTitle">最新回复</view>
                            <view class="replyList" v-if="firstReplyComment.length>0">
                                <view class="reply-item" v-for="(item, index) in firstReplyComment" :key="index">
                                    <view class="userInfo_avatar" @tap="toSendSecondReply(item)"> <img :src="item.wxUserInfo.avatarUrl? item.wxUserInfo.avatarUrl : defaultAvatarUrl" alt=""> </view>
                                    <view class="reply-item_left">
                                        <view class="user-info reply-user-info" @tap="toSendSecondReply(item)">
                                            <view class="user-info-left" style="display: flex; align-items: center;">
                                                <view class="user-name">{{ item.wxUserInfo.nickName }}</view>
                                            </view>
                                            <van-button size="mini" class="guanzhu" type="default">{{
                                                item.currentUserFollow == true ? '已关注' : '关注'}}</van-button>
                                        </view>
                                        <view class="comment-content" @tap="toSendSecondReply(item)">{{ item.content }}</view>
                                        <view class="comment-footer">
                                            <view class="time" @tap="toSendSecondReply(item)">{{ item.formattedTime }}</view>
                                            <view class="interaction">
                                                <!-- <van-icon name="chat-o" style="margin-right: 8rpx;" size="12" />
                                                <view class="currentNum" style="margin-right:40rpx;">{{ item.commentCount }}
                                                </view> -->
                                                <!-- <van-icon name="like-o" style="margin-right: 8rpx;" size="12" /> -->
                                                <view @click.stop="handlerReplyLike(item)" style="margin-right: 8rpx;">
                                                    <van-icon name="good-job-o" size="15"
                                                        style="color:#888888 !important;" v-if="!item.ifLike" />
                                                    <van-icon name="good-job" size="15"
                                                        style="color:#FF6203 !important;" v-if="item.ifLike" />
                                                </view>
                                                <view class="currentNum">{{ item.likeCount }}</view>
                                            </view>
                                        </view>
                                        <view class="reply_comment_num" v-if="item.commentCount > 0" @tap="toShowSecond(item)">
                                            {{item.commentCount}}回复 <van-icon name="arrow" size="12" style="margin-left: 24rpx;"/>
                                        </view>
                                    </view>
                                </view>
                                <view v-if="loading" class="loading-text">正在加载...</view>
                                <view v-if="finished" class="no-more-text">没有更多了</view>
                            </view>
                            <view class="replyList" v-if="firstReplyComment.length==0">
                                <view class="noReply">当前暂无回复</view>
                            </view>
                        </view>
                        <view class="replyFooter" v-if="pageSymbol !== 'myActCommentDetails'">
                            <!-- <input type="text" placeholder="我也来说~" @tap="handlerSendFirstReply" /> -->
                             <view class="replyInput" @tap="handlerSendFirstReply(1)">我也来说~</view>
                            <view class="reply-interaction">
                                <view style="margin-right: 40rpx;display: flex; flex-direction: column; justify-content: center;" >
                                    <van-icon name="chat-o" />
                                    <view class="currentNum">{{ comments.commentCount }}</view>
                                </view>
                                <!-- <van-icon name="like-o" />
                                            <text class="count">{{comments.likeCount}}</text> -->
                                <view @click.stop="handlerLike(comments)" style="display: flex; flex-direction: column; justify-content: center;" >
                                    <van-icon name="good-job-o" size="15" style="color:#888888 !important;"
                                        v-if="!comments.currentUserLike" />
                                    <van-icon name="good-job" size="15" style="color:#FF6203 !important;"
                                        v-if="comments.currentUserLike" />
                                    <view class="currentNum">{{ comments.likeCount }}</view>
                                </view>
                                
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 发布一级二级三级回复 -->
        <send-first-reply :show="showSendReply" :commentId="commentId" :pageSymbol="pageSymbol" :comments="commentsData"
            :replyComments="replyComments" :firstReplyComment="firstReplyComment" :defaultAvatarUrl="defaultAvatarUrl"
            :activityId="params.activitiesId" :postId="postId" @closePopup="closePopup"
            @reply-success="handleReplySuccess" :level="level"></send-first-reply>
        <allSecondReply :show="showSecondReply" :commentId="commentId" :pageSymbol="pageSymbol" :comments="firstCommentsInfo"
            :replyComments="replyComments" :firstReplyComment="firstReplyComment" :defaultAvatarUrl="defaultAvatarUrl"
            :activityId="params.activitiesId" :postId="postId" @closePopup="closePopup"
            @reply-success="handleReplySuccess" :level="level"></allSecondReply>
    </view>
</template>
  
<script>
import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {getCommentInfoApi,getFirstCommentListApi } from '@/api/activity'
import { likeCommentApi } from '@/api/judge'
import sendFirstReply from '@/mycomponents/activity/sendFirstReply.vue'
import allSecondReply from '@/mycomponents/activity/allSecondReply.vue'
import { PAGE_TYPE } from '@/utils/constant'
import { formatRelativeTime } from '@/utils/time-format-utility';

export default {
    components: {
        sendFirstReply,
        allSecondReply
    },
    data () {
        return {
            
            title: '活动评价',
            defaultAvatarUrl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png",
            comments: {
              
            },
            replyComments: [
                {
                    avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    name: '赵楠',
                    follow: false,
                    content: '带上我的无压在一起吧，我需要呼吸山间的空气！',
                    images: [
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    ],
                    time: '刚刚',
                    commentCount: 19,
                    likeCount: 19
                },
                {
                    avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    name: 'Cool Marlon',
                    follow: true,
                    content: '25年春节档有多部大片上映，如《封神榜》《哪吒2》《射雕英雄传之侠之大者》，我个人最推荐的肯定就是《哪吒2》。',
                    images: [
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png'
                    ],
                    time: '50分钟前',
                    commentCount: 19,
                    likeCount: 19
                }
            ],
            commentsData:{}, //zi
            firstCommentsInfo:{}, //评论下的一级评论 及二级评论
            params:{},
            productId:undefined,
            isFollowUp: undefined,
            isPic: undefined,
            sortField:'comprehensive',  //排序类型，综合（comprehensive）、最新（last）、回头客（repeatBuy）
            timeDiffResult:'',
            replyId:undefined, //评论id
            pageType:undefined, //页面来源表示   1：我的活动评价详情  2：首页的活动列表
            pageSymbol:undefined, //页面来源表示   1：我的活动评价详情  2：活动评价页跳转至详情
            firstReplyComment:[], //一级回复
            pageNum:1,
            pageSize:10,
            total:0,
            activitiesId:undefined,  //活动ID
            loading: false,
            finished: false,
            hasData:false,  //是否有数据
            showSendReply:false,  //是否显示发布一级回复弹窗
            postId:undefined,  //发布评论需要的ID
            level:1,  //评论层级
            showSecondReply:false,  //是否显示二级回复弹窗
        }
    },
    computed: {
        // preCalculatedTimeDiff() {
        //     return this.timeDiffResult; // 在模板中直接使用提前计算好的结果
        // }
    },
    filters: {
        // timeFormatDay(time1) {
        //     console.log('time1', time1)
        //     return timeFormatDay(time1)
        // },
        // timeFormat(time1){
        //     console.log('time1', time1)
        //     return timeFormat(time1)
        // },
        // formatDateSE(timeStr) {
        //     console.log(timeStr,'timeStr')
        //     if (timeStr !== null && timeStr !== undefined) {
        //         // const timeA=timeStr.replace(/-/g, '/')
        //         const timeStrss = timeStr.replace('+0000', '');
        //         const date = new Date(timeStrss);
        //         const year = date.getFullYear();
        //         const month = ("0" + (date.getMonth() + 1)).slice(-2);
        //         const day = ("0" + date.getDate()).slice(-2);
        //         const weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
        //         const hours = ("0" + date.getHours()).slice(-2);
        //         const minutes = ("0" + date.getMinutes()).slice(-2);
        //         const formatDate = `${year}.${month}.${day}  ${hours}:${minutes}`
        //         return formatDate;
        //     } else {
        //         console.error('传入的startTime格式不正确，期望为合法数字类型的时间戳');
        //         return ''
        //     }

        // },

        // toimg(text) {
        //     return weixinMojiTranslate(text)
        // }
    },
    onLoad (data) {
    // 取到路由携带的参数
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.replyId=this.params.replyId
            this.pageType = this.params.pageType
            this.pageSymbol = this.params.pageSymbol
        }
    },
    onReady () {
    },
    onShow(){
        this.getUserCommentInfo(this.replyId)
        this.getFirstReplyCommentList()
    },
    methods: {
        formatTime(timestamp) {
            return formatRelativeTime(timestamp);
        },

        // 互动页面
        scrollPage(e) {
            // console.log(e.detail.scrollTop, this.scrolling)
            // if (e.detail.scrollTop > 1 && !this.scrolling) {
            //     this.scrolling = true
            // } else if ((e.detail.scrollTop <= 1 && this.scrolling) || (e.detail.scrollTop <= 1 && !this.scrolling)) {
            //     this.scrolling = false
            // }
        },
        // 新增加载更多方法
        loadMore() {
            if (!this.finished) {
                this.getFirstReplyCommentList();
            }
        },
        calculateTimeDiff(time1,time2) {
            console.log(time1,'time1',time2,'time2')
            var time = new Date(time1.replace(/-/g, '/').replace('+0000', '')).getTime()
            var timess2=new Date(time2.replace(/-/g, '/').replace('+0000', '')).getTime()
            console.log(time,timess2,'time')
            // debugger
            if (time > 0) {
                var result
                time = parseInt(time)
                var minute = 1000 * 60
                var hour = minute * 60
                var day = hour * 24
                var month = day * 30
                // var now = new Date().getTime()
                var diffValue = time - timess2
                if (diffValue < 0) {
                    return
                }
                var monthC = diffValue / month
                var weekC = diffValue / (7 * day)
                var dayC = diffValue / day
                var hourC = diffValue / hour
                var minC = diffValue / minute

                if (monthC >= 1) {
                    if (monthC <= 12) {  //未超过一年  08-09 11:09:09
                     result = '' + parseInt(dayC) + '天后'
                    } else { //超过一年  2022-08-25 11:26:09
                    result =time1
                    }
                } else if (weekC >= 1) {
                    result = '' + parseInt(dayC) + '天后'
                } else if (dayC >= 1) {
                    result = '' + parseInt(dayC) + '天后'
                } else if (hourC >= 1) {
                     result = '' + 1 + '天内'
                } else if (minC >= 1) {
                    result = '' + parseInt(minC) + '分钟内'
                } else {
                    // result = '刚刚'
                    result = '' + 1 + '分钟内'
                }
                return result
            } else {
                return ''
            }
        },
        // 返回按钮
        onClickLeft () {
            if (this.params.pageSign == 'scan'){
                uni.switchTab({
                    url: '/pages/find/index'
                })
            }else{
                uni.redirectTo({
                    url:
                        '/pages/findPage/activityDetail?params=' +
                        encodeURIComponent(JSON.stringify(this.params))
                })
            }
            
        },
        handlerSendFirstReply(val){
            this.level = val
            this.postId = this.replyId
            this.commentsData = this.comments
            this.showSendReply=true
        },
        // 发布二级评论
        toSendSecondReply(item){
            this.postId = item.id
            this.level = 2 //当前是1级别评论 发布的是二级评论
            this.commentsData = item
            this.showSendReply=true
        },
        // 跳转至评论详情 --- 一级对应的二级评论弹窗
        toShowSecond(item){
            this.postId = item.id
            this.showSecondReply = true
            this.firstCommentsInfo = item //要把以及评论带过去
        },
        closePopup(){
            this.showSendReply=false
            this.showSecondReply = false
        },
        // 发布首评、新增回复成功处理
        handleReplySuccess() {
            this.clearData()
            this.getFirstReplyCommentList() // 刷新评论数据
        },


        // 点赞  评论详情顶部主信息的点赞
        handlerLike(item){
            comments.currentUserLike=!comments.currentUserLike
            if(comments.currentUserLike){
                comments.likeCount++
            }else{
                comments.likeCount--
            }
            // this.replyId=item.id
            this.likeComment(this.replyId,'post')
        },

        // 点赞  评论详情底部的点赞  回复中的点赞
        handlerReplyLike(item){
            item.ifLike=!item.ifLike
            if(item.ifLike){
                item.likeCount++
            }else{
                item.likeCount--
            }
            this.likeComment(item.id,'comment')
        },


        // 调用一级评论 清空数据  
        clearData(){
            this.firstReplyComment=[]
            this.pageNum=1
            this.pageSize =10
            this.total=0
            this.finished=false
            this.hasData=false
        },

        // 是否为null
        areAllNull(...args) {
            return args.every(arg => arg === null);
        },

        // 都不为null
        notAreAllNull(...args) {
            return args.every(arg => arg !== null);
        },


        // 判断是否有图片
        handleImages(pics) {
            // 判断追评中是否有图片的逻辑
            let isPics;
            if (pics !== null && pics !== '' && pics !== undefined) {
                isPics = true;
            } else {
                isPics = false;
            }
            return isPics;
        },

        // 获取主评论详情信息
        getUserCommentInfo(replyId){
            getCommentInfoApi({
                id:replyId
            }).then(res=>{
                console.log(res,'getCommentInfoApi')
                if(res.code===200){
                    const comments = {
                        ...res.data,
                        formattedPublishTime:  this.formatTime(res.data.publishTime)
                    };
                    this.comments=comments
                    if (this.comments.attachment) {
                        this.comments.judgeImages = this.comments.attachment.split(',') || []
                    } else {
                        this.comments.judgeImages = []
                    }

                }else{
                    // this.$toast(res.msg)
                }
            })
        },

        // 获取主评论下的一级评价   一级回复   页面底部的回复内容
        getFirstReplyCommentList(){
            if (this.loading || this.finished) return;
            this.loading = true;
            
            return new Promise((resolve, reject) => {
                getFirstCommentListApi({
                    postId:this.replyId,  //一级用postId  二三级用commentId
                    pageSize:10,
                    pageNum:1,
                    activityId:this.params.activitiesId,
                }).then(res=>{
                    console.log(res,'getFirstCommentListApi')
                    if(res.code===200){
                        this.total = res.data.total;
                        // // 修改数据合并方式
                        // this.firstReplyComment = this.pageNum === 1
                        //     ? res.data.list
                        //     : [...this.firstReplyComment, ...res.data.list];
                        const processedList = res.data.list.map(item => ({
                            ...item,
                            formattedTime: this.formatTime(item.publishTime)
                        }));

                        this.firstReplyComment = this.pageNum === 1
                            ? processedList  // 使用处理后的数据
                            : [...this.firstReplyComment, ...processedList];

                        this.firstReplyComment.forEach(item => {
                            if (item.attachment) {
                                item.judgeImages = item.attachment.split(',') || []
                            } else {
                                item.judgeImages = []
                            }
                            console.log(item.judgeImages,'item',item)
                        
                        })
                        this.finished = this.firstReplyComment.length >= this.total;
                        this.pageNum++;
                        console.log(this.firstReplyComment, 'this.firstReplyComment')
                        this.hasData = this.firstReplyComment.length > 0
                        resolve(res)
                    } else {
                        reject(res)
                    }
                }).finally(() => {
                    this.loading = false;
                })
            })
        },
         // 点赞  取消点赞
         likeComment(replyId,type){
            return new Promise((resolve, reject) => {
                const params={
                    commentId:replyId,
                    interactionsTargetType:type
                }
                likeCommentApi(params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        console.log('res-----', res.data)
                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },
        // // 二级评论
        // getSecondCommentList(replyId){
        //     getSecondCommentListApi({
        //         commentId:replyId,
        //         pageSize:10,
        //         pageNum:1,
        //         activityId:this.params.activitiesId,
        //     }).then(res=>{
        //         console.log(res,'getSecondCommentListApi')
        //     })
        // },

    }
}
</script>
    
<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background-color: #ffffff;
    background-size: 100%;

}

.main-container {
    background-color: #ffffff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

.scroll-box {
    height: 100vh;
    background: #ffffff;
}
// 评论
.reviewWrapper {
    padding: 40rpx 0rpx;
}
.reviewList{
    margin-top: 40rpx;
}
// 评价标题
.replyTitle{
    font-weight: 500;
    font-size: 36rpx;
    text-align: left;
    color: #333;
}
// 最新评论
.newReply{
   margin-top: 40rpx;
   padding: 0 48rpx;
    .replyList{
        margin-top: 40rpx;
    }
    .reply-item_left{
        width: calc(100% - 104rpx);
    }

}
// 综合评论 公用
.comment-item {
    margin-bottom: 66rpx;
    background-color: white;
    border-radius: 8rpx;
    overflow: hidden;
}
.reply-item{
    display: flex;
    margin-bottom: 64rpx;
    .reply-user-info{
        height: 80rpx;
        line-height: 80rpx;
    }
}

.userInfo_avatar {
    img{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 24rpx;
    }
}
.user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-info-left {
        display: flex;
        align-items: center;
        
        img{
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 24rpx;
        }
    }
}

.user-name {
    margin-left: 10rpx;
    font-size: 28rpx;
    text-align: left;
    color: #333;
}

.comment-content {
    margin: 24rpx 0;
    font-weight: 400;
    font-size: 32rpx;
    line-height: 48rpx;
    text-align: left;
    color: #333;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    // height: 330rpx;
    width: 100%;
    // gap: 5rpx; /* 新增间距 */
    .imgInfo{
        width: calc((100% - 10rpx)/3); /* 调整宽度适配间隙 */
        overflow: hidden; /* 防止图片溢出 */
        margin-bottom:10rpx;
    }
    img{
        height:220rpx;
        width: 100%;
    }
    .imgInfo:nth-child(2n) {
        margin-bottom: 0rpx; /* 调整下间距 */
    }
}

.comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
    font-size: 24rpx;
    color: #999;
}
.comment-footer .time{
    font-weight: 400;
    font-size: 24rpx;
    text-align: left;
    color: #999;
}
.reply_comment_num{
    margin-top: 32rpx;
    padding: 10rpx 20rpx;
    border-radius: 12rpx;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    width: 25%;
    font-size: 28rpx;
    text-align: center;
    color: #333;
}
.interaction {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 24rpx;
    text-align: left;
    color: #333;
}

.more-comments {
    text-align: center;
    margin-top: 40rpx;
    padding-bottom: 114rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 28rpx;
    text-align: left;
    color: #ff6203;
}


// 当前暂无评论
.noReply{
    padding-bottom: 54rpx;
    font-weight: 400;
    font-size: 24rpx;
    text-align: center;
    color: #999;
}

// 一级回复
.replyFooter{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding:12rpx 48rpx;
    width: calc(100% - 96rpx);
    padding-top: 12rpx;
    padding-bottom:calc(48rpx + env(safe-area-inset-bottom));
    padding-left: 48rpx;
    padding-right: 48rpx;
    background-color: white;
    bottom: 0;
    border-top: 2rpx solid #efefef;


    .replyInput{
        font-weight: 400;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: left;
        color: #999;
    }
    .reply{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .reply-interaction{
        display: flex;
        align-items: center;



    }
}
.currentNum{
    font-weight: 400;
    font-size: 24rpx;
    text-align: center;
    color: #333;
}

// 加载
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 14px;
    color: #333333;
}

::v-deep .van-empty {
    background: transparent;
    border-radius: 12px;
}

::v-deep .van-empty__image {
    width: 164px;
    height: 164px;
}
::v-deep .van-button--default  {
    border-radius: 50rpx;
}

.pl15 {
    padding-left: 15px;
}

.b12 {
    margin-bottom: 12px;
}

.t12 {
    margin-top: 12px;
}
</style>
    